<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style lang="less" scoped>

    .top{
        border-top: 1px solid #eee
    }
    .bottom{
        border-top: 1px solid #eee
    }
    .el-tag{
        margin: 10px;
    }
    .rcenter{
        display:flex;
        align-items: center;
    }
</style>
</head>
<body>
  <div id="app">

    <!-- components/power/Role.vue -->
    <template>
        <div>
            <el-card>
                <!-- 新增角色按钮 -->
                <el-row :gutter="20">
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline">新增角色</el-button>
                    </el-col>
                </el-row>
                <!-- 表格显示 -->
                <el-row>
                    <el-col>
                        <el-table :data="roleList" style="width:100%">

                            <!-- <el-table-column type="index"></el-table-column> -->
                            <el-table-column prop="id" label="ID"></el-table-column>
                            <el-table-column prop="name" label="角色名称"></el-table-column>
                            <el-table-column prop="desc" label="角色详情"></el-table-column>
                            <el-table-column prop="level" label="操作" width="300px">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="success" icon="el-icon-edit">修改</el-button>
                                    <el-button size="mini" type="danger" icon="el-icon-edit">删除</el-button>
                                    <el-button size="mini" type="warning" icon="el-icon-edit" @click="showMenuDialog(scope.row)">分配权限</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-card>
            <el-dialog title="分配权限" :visible.sync="menuDialogVisible" width="40%" :before-close="handleClose">
                <el-tree :data="menuList" :props="menuProps" show-checkbox></el-tree>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dindex.htmlalog>
        </div>
    </template>


  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {             
            roleList: [{
                "id":1,
                "name":"张三",
                "desc":"123"
            },{
                "id":2,
                "name":"李四",
                "desc":"456"
            }
            ],
            menuDialogVisible:false,
            menuProps:{
                label: 'name',
                children: 'children'
            },
            menuList:[{"menuProps":123,"name":456}] 
        }
      },
        created(){
            this.getRoleList(),
            this.getMenuList()
        },
        methods: {
            async getRoleList() {
                const { data: res } = await this.$axios.get('/api/role')
                if (res.status !== 200) return this.$msg.error(res.msg)
                console.log(res.data);
                this.roleList = res.data
            },
            removeMenu(row,mid) {
                this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const { data: resp } = await this.$axios.get(`/api/del_menu/${row.id}/${mid}`)
                    if (resp.status !== 200) return this.$msg(resp.msg)
                    this.$msg({
                        type: 'success',
                        message: '删除成功!'
                    });
                    // this.getRoleList()
                    // console.log(row.id);
                    // console.log(mid);
                    row.menu = resp.data
                }).catch(() => {
                    this.$msg({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            showMenuDialog(row){
                this.menuDialogVisible = true
            },
            async getMenuList(){
                const{data :resp} = await this.$axios.get('/api/menu')
                if (resp.status !== 200) return this.$msg.error(resp.msg)
                this.menuList = resp.data
            }
        }
    })
  </script>
</html>